.flex {
  display: flex;

  &>* {
    display: block;
  }

  &>.flex {
    display: flex;
  }
}

/*
* 主轴方向：从左到右(默认)
*/

.flex-dir-left {
  flex-direction: row;
}

/*
* 主轴方向：从右到左
*/

.flex-dir-right {
  flex-direction: row-reverse;
  -webkit-box-pack: end;
}

/*
* 主轴方向：从上到下
*/

.flex-dir-top {
  flex-direction: column;
}

/*
* 主轴方向：从下到上
*/

.flex-dir-bottom {
  flex-direction: column-reverse;
  -webkit-box-pack: end;
}

/*
  主轴对齐方式：从左到右(默认)
*/

.flex-main-left {
  justify-content: flex-start;
}

/*
  主轴对齐方式：从右到左
*/

.flex-main-right {
  justify-content: flex-end;
}

/*
  主轴对齐方式：两端对齐
*/

.flex-main-justify {
  justify-content: space-between;
}

/*
  主轴对齐方式：居中对齐
*/

.flex-main-center {
  justify-content: center;
}

/*
  交叉轴齐方式：从上到下(默认)
*/

.flex-cross-top {
  align-items: flex-start;
}

/*
  交叉轴齐方式：从下到上
*/

.flex-cross-bottom {
  align-items: flex-end;
}

/*
  交叉轴齐方式：居中对齐
*/

.flex-cross-center {
  align-items: center;
}

/*
  交叉轴齐方式：跟随内容高度对齐
*/

.flex-cross-baseline {
  align-items: baseline;
}

/*
  交叉轴齐方式：高度并排铺满
*/

.flex-cross-stretch {
  align-items: stretch;
}

/*
  子元素平分宽度
*/

.flex-box-mean>*,
//所有元素
.flex-box-first>*,
//第一个子元素
.flex-box-last>*,
//最后一个子元素
//两端第一个子元素
.flex-box-justify>* {
  width: 0;
  height: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-box-first>*:first-child,
//第一个子元素
.flex-box-last>*:last-child,
//最后一个子元素
.flex-box-justify>*:first-child,
//两端第一个子元素
//两端最后一个子元素
.flex-box-justify>*:last-child {
  width: auto;
  flex-grow: 0;
  flex-shrink: 0;
}

/*
  子元素平分高度
*/

.flex-dir-topbox-mean>*,
.flex-dir-topbox-first>*,
//第一个子元素
.flex-dir-topbox-last>*,
//最后一个子元素
.flex-dir-topbox-justify>*,
//两端最后一个子元素
.flex-dir-bottombox-mean>*,
.flex-dir-bottombox-first>*,
//第一个子元素
.flex-dir-bottombox-last>*,
//最后一个子元素
//两端最后一个子元素
.flex-dir-bottombox-justify>* {
  width: auto;
  height: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-dir-topbox-first>*:first-child,
//第一个子元素
.flex-dir-topbox-last>*:last-child,
//最后一个子元素
.flex-dir-topbox-justify>*:first-child,
//两端第一一个子元素
.flex-dir-topbox-justify>*:last-child,
//两端最后一个子元素
.flex-dir-bottombox-first>*:first-child,
//第一个子元素
.flex-dir-bottombox-last>*:last-child,
//最后一个子元素
.flex-dir-bottombox-justify>*:first-child //两端第一一个子元素

//两端最后一个子元素
.flex-dir-bottombox-justify>*:last-child {
  height: auto;
  flex-grow: 0;
  flex-shrink: 0;
}

//子元素伸缩比例循环
@for $i from 0 through 10 {
  .flex-box-#{$i} {
    flex-grow: $i;
    flex-shrink: $i;
  }
}
